<template>
  <div class="select-brand page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- <van-nav-bar
      title="选择车型"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="padding-top: 50px;"
    >
      <template #right>
        <img src="../../assets/image/icon_search.png" alt="">
      </template>
    </van-nav-bar> -->
    <navbar :title="title" rightText='搜索' :typePage='typePage'></navbar>

    <van-index-bar class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
      <van-index-anchor index="A" />
      <van-cell
      v-for="item in initialArr.a"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="B" />
      <van-cell
      v-for="item in initialArr.b"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="C" />
      <van-cell
      v-for="item in initialArr.c"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="D" />
      <van-cell
      v-for="item in initialArr.d"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="E" />
      <van-cell
      v-for="item in initialArr.e"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="F" />
      <van-cell
      v-for="item in initialArr.f"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="G" />
      <van-cell
      v-for="item in initialArr.g"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="H" />
      <van-cell
      v-for="item in initialArr.h"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="I" />
      <van-cell
      v-for="item in initialArr.i"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="J" />
      <van-cell
      v-for="item in initialArr.j"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="K" />
      <van-cell
      v-for="item in initialArr.k"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="L" />
      <van-cell
      v-for="item in initialArr.l"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="M" />
      <van-cell
      v-for="item in initialArr.m"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="N" />
      <van-cell
      v-for="item in initialArr.n"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="O" />
      <van-cell
      v-for="item in initialArr.o"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="P" />
      <van-cell
      v-for="item in initialArr.p"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="Q" />
      <van-cell
      v-for="item in initialArr.q"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="R" />
      <van-cell
      v-for="item in initialArr.r"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="S" />
      <van-cell
      v-for="item in initialArr.s"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="T" />
      <van-cell
      v-for="item in initialArr.t"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="U" />
      <van-cell
      v-for="item in initialArr.u"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="V" />
      <van-cell
      v-for="item in initialArr.v"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="W" />
      <van-cell
      v-for="item in initialArr.w"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="X" />
      <van-cell
      v-for="item in initialArr.x"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="Y" />
      <van-cell
      v-for="item in initialArr.y"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

      <van-index-anchor index="Z" />
      <van-cell
      v-for="item in initialArr.z"
      :key="item.vnId"
      :title="item.vbmName"
      @click="getCarItem(item)"
      class="car-type-item"
      >
        <template #title>
          <img :src="item.vnLogo" alt="">
          <span>{{item.vbmName}}</span>
        </template>
      </van-cell>

    </van-index-bar>
  </div>
</template>

<script>
import {getAllList} from './api'
export default {
  props:{},
  data() {
    return {
      // header栏标题
      title: "选择车型",
      // 获取屏幕状态栏高度
      phoneStatusBarHeight:'',
      initialArr: {
        a: [],
        b: [],
        c: [],
        d: [],
        e: [],
        f: [],
        g: [],
        h: [],
        i: [],
        j: [],
        k: [],
        l: [],
        m: [],
        n: [],
        o: [],
        p: [],
        q: [],
        r: [],
        s: [],
        t: [],
        u: [],
        v: [],
        w: [],
        x: [],
        y: [],
        z: []
      },
      typePage:''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      this.$router.push('/form/searchBrand')
    },
    // 得到车型数据并 根据26个字母将数据过滤为26个字符串
    async getData() {
      const {data} = await getAllList()
      // console.log(data)
      data.forEach(element => {
        if (element.initial === 'A') {
          this.initialArr.a.push(element)
        } else if (element.initial === 'B') {
          this.initialArr.b.push(element)
        } else if (element.initial === 'C') {
          this.initialArr.c.push(element)
        }else if (element.initial === 'D') {
          this.initialArr.d.push(element)
        }else if (element.initial === 'E') {
          this.initialArr.e.push(element)
        }else if (element.initial === 'F') {
          this.initialArr.f.push(element)
        }else if (element.initial === 'H') {
          this.initialArr.h.push(element)
        }else if (element.initial === 'I') {
          this.initialArr.i.push(element)
        }else if (element.initial === 'G') {
          this.initialArr.g.push(element)
        }else if (element.initial === 'J') {
          this.initialArr.j.push(element)
        }else if (element.initial === 'K') {
          this.initialArr.k.push(element)
        }else if (element.initial === 'L') {
          this.initialArr.l.push(element)
        }else if (element.initial === 'M') {
          this.initialArr.m.push(element)
        }else if (element.initial === 'N') {
          this.initialArr.n.push(element)
        }else if (element.initial === 'O') {
          this.initialArr.o.push(element)
        }else if (element.initial === 'P') {
          this.initialArr.p.push(element)
        }else if (element.initial === 'Q') {
          this.initialArr.q.push(element)
        }else if (element.initial === 'R') {
          this.initialArr.r.push(element)
        }else if (element.initial === 'S') {
          this.initialArr.s.push(element)
        }else if (element.initial === 'T') {
          this.initialArr.t.push(element)
        }else if (element.initial === 'U') {
          this.initialArr.u.push(element)
        }else if (element.initial === 'V') {
          this.initialArr.v.push(element)
        }else if (element.initial === 'W') {
          this.initialArr.w.push(element)
        }else if (element.initial === 'X') {
          this.initialArr.x.push(element)
        }else if (element.initial === 'Y') {
          this.initialArr.y.push(element)
        }else if (element.initial === 'Z') {
          this.initialArr.z.push(element)
        }
      });
      // console.log('a',this.initialArr)
    },
    getCarItem(item){
      let vnId = item.vnId
      this.$router.push({
        name: 'SelectBrandDetail',
        query: {
          id: vnId,
          name: item.vbmName,
          myName: this.$route.query.myName
        }
      })
      console.log( this.$route.query)
    },

  },
  created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
      if (this.$route.query.myName == 'editBuyCarNotification') {
        this.typePage = '编辑购车事项通知书'
      } else if (this.$route.query.myName == 'add') {
        this.typePage = '新建爱车'
      }else if (this.$route.query.myName == 'FindCarForm') {
        this.typePage = '新增寻车'
      }else if (this.$route.query.myName == 'MortageForm') {
        this.typePage = '新增按揭'
      }
    this.getData()
  },
  mounted() {
    document.querySelector('body').setAttribute('style', 'background-color:#F8F8F8')
  }
}
</script>

<style scoped lang='less'>
  .car-type-item{
    // justify-content: center;
    // align-items: center;
    // line-height: 20px;
    img{
      height: 20px;

    }
    span{
      margin-left: 12px;
    }
  }
</style>
<style lang='less'>
  .van-index-bar__index{
    padding-top: 4px;
    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .van-index-anchor{
    background: #F8F8F8;
  }
  .van-nav-bar__title{
    font-size: 17px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
  }
  .van-nav-bar .van-icon{
    color: #000000;
    font-size: 17px;

  }
</style>
